<template>
    <div>
        <user-top :title="msg"></user-top>
        <div class="body">
            <p class="codeOpen">点击展开</p>
            <div class="body-code" @click="codeClick"  v-bind:class="{'textColor':isColor, 'textSize':isSize}" >
                
                <div class="name"><span>{{uname}}</span><div class="nameBox">支付宝认证</div></div>
                <div class="images">
                    <!-- <img src="../../../assets/img/code.jpg" alt="">
                    <span>CS234567899876544D</span> -->
                    <Code></Code>
                </div>
                <span>身份码可在菜鸟驿站取包裹或为他人代取时使用，20分钟后自动刷新</span>
            </div>
            <div class="code-advertising" >
                <div class="moneyTitle">用裹裹取件，天天能赚钱</div>
                <div class="body-money">
                    <img src="../../../assets/img/money.png" alt="">
                    <div class="moneyCenter">
                        <div>累计已赚钱（可提现到支付宝</div>
                        ￥<span class="moneyNumber">22</span>
                    </div>
                    <button>前往查看</button>
                </div>
                <div class="body-advertising">
                    <!-- <el-carousel height="150px"> -->
                    <!-- <el-carousel-item v-for="item in 1" :key="item"> -->
                        <!-- <h3 class="small">{{ item }}</h3> -->
                    <img src="../../../assets/img/hongbao.png" alt="">
                    <!-- </el-carousel-item> -->
                    <!-- </el-carousel> -->
                    
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
import Code from "@/components/userMine/code.vue"
export default {
    data() {
        return{
            isColor:true,
            isSize:false,
            msg: '身份码',
            uname: ''
        }
    },
    components: {
         UserTop,
         Code
    },
    methods:{
         backClick(){
            this.$router.push("/userMine")
        },
        codeClick(){
            this.isColor = !this.isColor;
            this.isSize = !this.isSize;
            var advertisings = document.querySelector(".code-advertising");
            var codeOpens = document.querySelector(".codeOpen");
            if(advertisings.style.display=="none"){
                advertisings.style.display = "block";
                codeOpens.style.display = "block";
            }else{
                advertisings.style.display = "none";
                codeOpens.style.display = "none";
            }
        }
    },
    mounted() {
        let _this = this;
        _this.uname = window.sessionStorage.getItem('uname');
    }
}
</script>

<style lang="scss" scoped>
.body{
    text-align: center;
    .codeOpen{
        position: absolute;
        right: 30px;
        top: 140px;
    }
    &-code{
        background-color: #fff;
        border-radius: 15px;
        text-align: center;
        .name{
            padding: 40px 0;

            .nameBox{
                display: inline-block;
                color:#37a3f1;
                font-size: 20px;
                border-radius: 8px;
                border-left: 1px solid #37a3f1;
                border-right: 1px solid #37a3f1;
                padding: 0 5px;
            }
        }
        .name span:nth-child(1){
            font-size: 35px;
            margin-right: 7px;
        }
        .images{
            margin-bottom: 40px;
            img{
                width: 95%;
            }
        }
    }
    .moneyTitle{
        margin: 70px 0 30px 0;
        font-size: 35px;
    }
    &-money{
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        margin: 15px;
        padding: 28px;
        img{
            height: 80px;
        }
        button{
            height: 50px;
            border: none;
            background-color: #f1616b;
            border-radius: 30px;
            color: #fff;
            padding: 5px 10px;
        }
        .moneyCenter{
            text-align: left;

            .moneyNumber{
                font-size: 50px;
            }
        }
        .moneyCenter div:nth-child(1){
            color: #948f89;
        }

    }
    &-advertising{
        // width: 96%;
        margin: 8px;
        padding: 10px;
        margin-top: 40px;
        img{
            width: 100%;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
    .code-advertising{
        display: block;
    }
    .textColor{
        display: inline-block;
        margin: 15px;
        padding: 28px;
        transition: all 0.2s ease 0s;
    }
    .textSize{
        display: inline-block;
        width: 108%;
        transform: scale(1.6) rotate(90deg) translate(270px, 20px);
        transition: all 0.5s ease 0s;
        padding: 10px 0;
    }
}
</style>